<template>
  <a-modal v-model:visible="dialogOpenStatus" :maskClosable="false" :width="480" :centered="true" :destroyOnClose="true" title="删除模型"
    class="remove-model-dialog" @cancel="dialogClose">
    <div class="remove-indicator-tip">是否确定删除所选模型</div>
    <template #footer>
      <div class="dialog-footer-box">
        <div class="cancel-btn" @click="dialogClose">取消</div>
        <div class="ok-btn" @click="ok">确定</div>
      </div>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { defineEmits, ref, defineProps, watch } from 'vue';



const props = withDefaults(defineProps<{
  openStatus: boolean;
  subfieldName: string;
}>(), {
  openStatus: false,
  subfieldName: ""
});

watch(() => props.openStatus, (newValue) => {
  dialogOpenStatus.value = newValue;
});

const emits = defineEmits<{
  (e: "update:openStatus", payload: boolean): void;
  (e: "ok"): void;
}>();

const dialogOpenStatus = ref<boolean>(props.openStatus);


function dialogClose() {
  emits("update:openStatus", false);
}

/**
 * 验证表单
 */
async function ok() {
  try {
    // 通过验证将数据反馈给父组件
    emits("ok");
    emits("update:openStatus", false);
  } catch (error) {

  }
}


</script>

<style lang="less">
.remove-model-dialog {
  .ant-modal-header {
    height: 56px;
    padding: 0px 20px;
    display: flex;
    align-items: center;
  }

  .ant-modal-body {
    padding: 32px 20px !important;
    box-sizing: border-box;

    .remove-indicator-tip {
      color: #303133;
      font-size: 14px;
      font-weight: 500;
      line-height: 22px;
    }
  }

  .ant-modal-footer {
    height: 62px;
    padding: 10px 20px 20px 20px;
    border-top: unset;
    box-sizing: border-box;

    .dialog-footer-box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .ok-btn,
      .cancel-btn {
        font-size: 14px;
        padding: 0px 16px;
        border-radius: 4px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .cancel-btn {
        border: 1px solid #DCDFE6;
        color: #606266;

        &:hover {
          border-color: #C11A20;
          color: #C11A20;
        }
      }

      .ok-btn {
        background: #C11A20;
        color: #fff;
        margin-left: 12px;
      }
    }
  }

  .ant-modal-close {
    top: 20px;
    right: 20px;

    .ant-modal-close-x {
      width: 16px;
      height: 16px;
      line-height: 1;
    }
  }
}
</style>